<template>
	<view class="revenuedetails-container">
		<u-sticky>
			<view class="revenuedetails-header-box">
				<view class="revenuedetails-header">
					<view class="u-flex u-flex-between header-top">
						<text class="top-lable">余额</text>
						<view>
							<u-button type="primary" hairline="false" shape="circle" size="mini" text="立即提现"
								class="custom-style" @tap="toWithdrawalAmount"></u-button>
						</view>
					</view>
					<view class="u-flex u-flex-between u-flex-items-end header-bottom">
						<text class="header-balance">{{userBurse.wfBurseAmount}}</text>
						<text class="header-income">今日收益：{{userBurse.todayEarnings}}元</text>
					</view>
				</view>
				<view class="revenue-tabs">
					<u-tabs :list="revenueType" :scrollable="false" lineColor="#FF5046"
						:activeStyle="{ color: '#FF5046', fontWeight: 'bold', transform: 'scale(1.05)'}"
						@click="tabWfBurseDetail"></u-tabs>
				</view>
			</view>
		</u-sticky>

		<view class="revenue-list">
			<view class="revenue-list-item" v-for="item in listData" :key="item">
				<view class="u-flex u-flex-between list-item-cont">
					<text class="list-lable">{{item.businessType_dictText}}</text>
					<text class="list-money">{{item.incomeType === 'INCOME' ? '+' : '-' }}{{item.payMoney}}</text>
				</view>
				<text class="list-time">{{item.payTime}}</text>
			</view> 
			
			<u-empty marginTop="100rpx" v-if="!listData.length" :icon="getimageUrl('empty-revenue.png')"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, unref } from "vue";
	import { onLoad, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { wfBurseDetail } from '@/common/mine.api';
	import { getimageUrl } from '@/util/util.js';

	let listData = ref([])

	const userBurse = ref({
		wfBurseAmount: 999,
		todayEarnings: 999,
		wfBurseId: 0
	})

	const state = reactive({
		filtrate: {
			pageNo: 1,
			pageSize: 10,
			businessType: null,
			burseId: 0,
		},
		loadStatus: 'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
		isLoadMore: false,  //是否加载中
	})


	let revenueType = [
		{
			name: '全部',
			id: null
		}, {
			name: '惠补贴',
			id: 'orderRefund'
		}, {
			name: '推广收益',
			id: 'creditInvitation'
		}, {
			name: '提现',
			id: 'embody'
		}
	]
	function toWithdrawalAmount() {
		uni.navigateTo({
			url: `/pages/withdrawalAmount/withdrawalAmount?wfBurseId=${unref(userBurse).wfBurseId}&wfBurseAmount=${unref(userBurse).wfBurseAmount}`
		});
	}
	onLoad((option) => {
		userBurse.value.todayEarnings = option.todayEarnings
		userBurse.value.wfBurseAmount = option.wfBurseAmount
		userBurse.value.wfBurseId = option.wfBurseId
		state.filtrate.burseId = option.wfBurseId
		getList()
	})


	async function getList() {
		const result = await wfBurseDetail(state.filtrate)
		if (result.records.length !== 0) {
			listData.value = listData.value.concat(result.records)
			if (listData.value.length === result.total) {
				state.isLoadMore = true
				state.loadStatus = 'nomore'
			} else {
				state.isLoadMore = false
			}
		} else {
			state.isLoadMore = true
			state.loadStatus = 'nomore'
		}
	}

	//上拉触底函数
	onReachBottom(() => {
		if (!state.isLoadMore) {  //此处进行判断上锁，防止重复请求
			state.isLoadMore = true
			state.filtrate.pageNo += 1//页数加1
			getList()
		}
	})

	// 上拉刷新
	onPullDownRefresh(() => {
		//重新触发获取数据方法，刷新接口
		listData.value = []
		state.filtrate.pageNo = 1
		getList()
		//结束刷新
		uni.stopPullDownRefresh()
	})

	function tabWfBurseDetail(item) {
		listData.value = []
		state.filtrate.pageNo = 1
		state.filtrate.businessType = item.id
		getList()
		// console.log('item', item);
	}
</script>

<style lang="scss" scoped>
	.revenuedetails-container {
		padding-bottom: 10rpx;

		.custom-style {
			color: #0B1E51;
			font-size: 28rpx;
			padding: 10rpx 30rpx;
			background-color: #DCD6EA;
			border: #DCD6EA;
		}

		.revenuedetails-header-box {
			width: 100%;
			background: #fff;
			padding-top: 20rpx;

			.revenuedetails-header {
				color: #fff;
				// padding: 80rpx 80rpx 50rpx 80rpx;
				padding: 40rpx;
				margin: 0 20rpx;
				background: url('http://qianxueapplet.suoeryun.com/world_benefits_user/revenue-h.png') no-repeat;
				background-size: cover;
				background-position: center center;
				border-radius: 30rpx;

				.header-top {
					margin: 10rpx 0;

					.top-lable {
						font-weight: 400;
						font-size: 32rpx;
					}

				}

				.header-bottom {
					margin-top: 10rpx;

					.header-balance {
						font-size: 50rpx;
						font-weight: 700;
						color: #DCD6EA;

					}

					.header-income {
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}

		}

		.revenue-tabs {
			background: #fff;
		}

		.revenue-list {
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: 500;

			.revenue-list-item {
				background: #fff;
				margin: 0rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				border-radius: 12rpx;

				.list-item-cont {
					margin-bottom: 20rpx;

					.list-lable {
						color: #333333;
					}

					.list-money {
						color: #FF6D6D;
					}
				}

				.list-time {
					font-size: 24rpx;
				}
			}
		}

	}
</style>